<template>
  <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
      <el-form-item label="订单编号" prop="orderCode">
        <el-input style="display:none" />
          <el-input
            v-model="queryParams.orderCode"
            placeholder="请输入订单编号"
            clearable
            class="!w-240px"
            @blur="handleOrderCodeChange"
          />
        </el-form-item>
        <el-form-item label="规格型号" prop="type">
          <el-select
            v-model="queryParams.type"
            placeholder="请选择规格型号"
            clearable
            class="!w-240px"
          >
            <el-option v-for="item in typeList" :label="item" :value="item" :key="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 领料</el-button>
          <el-button
            type="primary"
            plain
            @click="handleOutbound"
            :loading="exportLoading"
            v-show="outboundFlag"
          >
            出库
          </el-button>
          <!-- <el-button
            type="primary"
            plain
            @click="openForm5"
            :loading="exportLoading"

            v-hasPermi="['system:post:export']"
          >
            挂单
          </el-button> -->
        </el-form-item>
      </el-form>
    </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
      <el-table v-loading="loading" :data="list" :row-class-name="tableRowClassName" class="cen">
        <el-table-column type="index" label="序号" fixed="left" align="center" width="55" />
        <el-table-column label="订单编号" align="center" prop="orderCode" fixed="left" />
        <el-table-column label="型号" align="center" prop="type" fixed="left" />
        <el-table-column label="织板编码" align="center" prop="code" fixed="left" />
        <el-table-column label="织板规格" align="center" prop="specification" fixed="left" />
        <el-table-column label="操作" align="center" width="60" fixed="left">
            <template #default="scope">
              <div class="flex items-center justify-center">
                <el-button
                  type="primary"
                  link
                  v-if = "scope.row.materialStatus === '0'"
                  @click="openForm(scope.row)"
                >修改
                </el-button>
                <el-button
                  type="primary"
                  link
                  v-if = "scope.row.materialStatus === '2'"
                  @click="openForm2(scope.row)"
                >审核
                </el-button>
                <el-button
                  type="primary"
                  link
                  v-if = "scope.row.materialStatus === '1'"
                  @click="handleReject(scope.row)"
                >驳回
                </el-button>
              </div>
            </template>
          </el-table-column>

        <el-table-column label="球拍型号" align="center" prop="racketModel">
          <!-- <template #default="scope">
        <el-tag
          :type="scope.row.tag ='success'"
          disable-transitions
          >{{ scope.row.specification }}</el-tag
        >
      </template> -->
    </el-table-column>
        <el-table-column label="张数" align="center" prop="sheetNum" />
        <el-table-column label="轻重" align="center" prop="weight" />
        <el-table-column label="裁剪尺寸" align="center" prop="cutSize" />
        <el-table-column label="刀数" align="center" prop="knivesNum" />
        <el-table-column label="数量" align="center" prop="amount" />
        <el-table-column label="裁剪理料" align="center" prop="materialsCut" />
        <el-table-column label="画线加层" align="center" prop="addLayers" />

        <el-table-column label="备料复核" align="center" prop="materialCheck" />
        <el-table-column label="发料" align="center" prop="issuMaterials" />
        <el-table-column label="备注" align="center" prop="remark" />

        
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <!-- 修改对话框 -->
    <materialPickForm ref="formRef" @success="getList" />
    <!-- 审核对话框 -->
    <materialPickCheckForm ref="formRefCheck" @success="getList"/>
    <!-- 挂单对话框 -->
    <!-- <materialPickHang ref="formRefHang" @success="getList" /> -->
  </template>
  
  <style>
    .el-table .warning-row {
      --el-table-tr-bg-color: var(--el-color-warning-light-9)!important;
    }
    .el-table .success-row {
      background-color: var(--el-color-success-light-9)!important;
    }
  </style>

  <script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import download from '@/utils/download'
  import * as materialPickApi from '@/api/hcxly/materialPick/Index'
  import materialPickForm from './materialPickForm.vue'
  import materialPickCheckForm from './materialPickCheckForm.vue'
  import materialPickHang from './materialPickHang.vue'
  import {listMaterialPick} from "@/api/hcxly/materialPick/Index";
  
  defineOptions({ name: 'materialPick' })
  
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const loading = ref(false) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const outboundFlag = ref(false)
  const exportFlag = ref(false)
  const typeList = ref([])

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    orderCode: '',
    type: ''
  })
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中

  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await materialPickApi.getmaterialPick(queryParams)
      list.value = data.list
      total.value = data.total
      if(total.value > 0){
        exportFlag.value = true
      }
      if(list.value){
        materialStatusArry.value = []
        for(let i in list.value){
          materialStatusArry.value.push(list.value[i].materialStatus)
        }
        await materialPickStatusFun()
      }else{
        outboundFlag.value = false
        exportFlag.value = false
      }
    } finally {
      loading.value = false
    }
  }

  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }
  
  /** 添加/修改操作 */
  const formRef = ref()
  const openForm = (row) => {
    formRef.value.open(row)
  }

  /** 审核操作 */
  const formRefCheck = ref()
  const openForm2 = (row) => {
    formRefCheck.value.open(row)
  }

  /** 驳回操作 */
  const handleReject = async (row) => {
    const rejectData = reactive({
      id: '',
      orderCode: '',
      type: '',
      code: '',
      materialStatus: ''
    })

    rejectData.id = row.id
    rejectData.orderCode = row.orderCode
    rejectData.type = row.type
    rejectData.code = row.code
    rejectData.materialStatus = row.materialStatus

    try {
      // 二次确认
      await message.confirm('确定驳回吗？')
      // 发起
      await materialPickApi.materialPickReject(rejectData)
      message.success('驳回成功！')
      // 刷新列表
      await getList()
    } catch {}
  }
  
  const queryParams1 = reactive({
    orderCode: ''
  })
  /** 导出按钮操作 */
  const handleExport = async () => {
    try {
      // 导出的二次确认
      await message.exportConfirm()
      // 发起导出
      exportLoading.value = true
      const data = await materialPickApi.exportMaterialPick(queryParams)
      download.excel(data, '领料导出数据.xls')
    } catch {
    } finally {
      exportLoading.value = false
    }
  }

  /** 挂单操作 */
  // const formRefHang = ref()
  // const openForm5 = (orderCode: string, type: string, code: string, materialStatus: string) => {
  //   formRefHang.value.open(orderCode, type, code, materialStatus)
  // }

  /** 判断表格单元背景色 */
  const tableRowClassName = (row) => {
    console.log(row.row.materialStatus)
    if (row.row.materialStatus === '2') {
      return 'warning-row'
    } else if (row.row.materialStatus === '1') {
      return 'success-row'
    }
    return ''
  }

  const materialStatusArry = ref([])
  /** 提交出库操作 */
  const handleOutbound = async () => {
    try {
      // 二次确认
      await message.exportConfirm()
      // 发起提交出库
      exportLoading.value = true
      await materialPickApi.subOutbound(queryParams)
      message.success('出库成功！')
    } catch {
    } finally {
      exportLoading.value = false
    }
  }

  /** 提交出库操作 */
  const materialPickStatusFun = async () => {
    try {
      outboundFlag.value = await materialPickApi.materialPickStatus(queryParams)
      console.log(outboundFlag.value)
    } catch {
    } finally {
      
    }
  }

  const getTypeList = async () => {
    typeList.value = await materialPickApi.queryOrderFlexList(queryParams.orderCode)
  }

  const handleOrderCodeChange = async () => {
    await getTypeList()
  }

  /** 初始化 **/
  onMounted(() => {
    //getList()
  })
  
  </script>
